<template>
  <div class="container">
      <table border="1" style=" border-collapse: collapse; text-align: center; width:100%">
            <thead>
                <tr>
                    <th><input type="checkbox" name="" id=""></th>
                    <th>角色名称</th>
                    <th>角色搭述</th>
                    <th>角色类型</th>
                    <th>角色权限配置</th>
                    <th>角色启用状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in arr" :key="index" v-colors="index">
                    <td><input type="checkbox" name="" id=""></td>
                    <td>{{item.nick}}</td>
                    <td>{{item.role}}</td>
                    <td>{{item.type}}</td>
                    <td>{{item.quanxian}}</td>
                    <td><button @click="clickfun(item,index)">点击</button><span v-html="item.caozuo"></span></td>
                </tr>
            </tbody>
        </table>
  </div>
</template>
<style scoped>
  
    table tr th,table tr td{
   
    }
  
</style>
<script>
export default {
  data() {
    return {
       arr: [
              {
              nick:'大区经理',
              role:'---',
              type:'子企业角色',
              quanxian:'坐席与技能组:坐席管理、技能组管理、忙...',
              caozuo:'已停用',
              },
              {
              nick:'开发工程师',
              role:'---',
              type:'子企业角色',
              quanxian:'坐席与技能组:坐席管理、技能组管理、忙...',
              caozuo:'已停用',
              }
            ],
    }
  },
  methods:{
    clickfun(item){
          // console.log(item,index)
          if (item.caozuo=='已停用') {
              item.caozuo='已启用'
          }else{
              item.caozuo='已停用'
          }
      },

      blurfun(){
          /* this.$refs.属性值=》直接获取html中的标签，不用在data中写内容 */
          console.log(this.$refs.abc) //整个完整的标签

          this.$refs.abc.style.color="green";
      }
  },
  components: {

  },
  directives: {
      /* 局部引入 自定义指令，隔行换色 */
      colors(obj,index){
          // console.log(obj,index) //obj=>标签 index=>value是索引
          if(index.value%2==0){
              obj.style.color="green"
          }else{
              obj.style.color="blue"
          }
      }
  }
}
</script>

<style scoped>

</style>
